<template>
  <ModalBox title="添加學生" :width="400" ref="modalRef">
    <a-form
      :model="formState"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      autocomplete="off"
      ref="formRef"
    >
      <a-form-item label="角色:" name="role" :rules="[{ required: true, message: '請選擇角色!' }]">
        <a-select v-model:value="formState.role" placeholder="請選擇角色">
          <a-select-option value="jack">學生</a-select-option>
          <a-select-option value="lucy">老師</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="姓名:"
        name="username"
        :rules="[{ required: true, message: '請輸入姓名!' }]"
      >
        <a-input v-model:value="formState.username" placeholder="請輸入姓名" />
      </a-form-item>
      <a-form-item
        label="學生賬號:"
        name="account"
        :rules="[{ required: true, message: '請輸入學生賬號!' }]"
      >
        <a-input v-model:value="formState.account" placeholder="請輸入學生賬號" />
      </a-form-item>
      <a-form-item
        label="手機號碼:"
        name="phone"
        :rules="[{ required: true, message: '請輸入手機號碼!' }]"
      >
        <a-input v-model:value="formState.phone" placeholder="請輸入手機號碼" />
      </a-form-item>
    </a-form>

    <div class="w-full flex justify-center gap-5 pt-5">
      <a-button size="large" style="width: 96px" @click="close">取消</a-button>
      <a-button type="primary" size="large" @click="submit">確認添加</a-button>
    </div>
  </ModalBox>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ModalBox from '@/components/ModalBox.vue'
const modalRef = ref()
const formRef = ref()

interface FormState {
  username: string
  role: string | null
  account: string
  phone: string
}
const formState = ref<FormState>({
  username: '',
  role: null,
  account: '',
  phone: '',
})

const submit = () => {
  formRef.value.validate().then(() => {
    console.log('validate success')
    close()
  })
}

const open = () => {
  modalRef.value.open()
}

const close = () => {
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>

<style scoped>
:deep(.ant-select),
:deep(.ant-select-selector),
:deep(.ant-select-selection-search-input),
:deep(.ant-select-selection-placeholder),
:deep(.ant-select-selection-item),
.ant-input {
  height: 40px !important;
  line-height: 40px !important;
}
</style>
